import React from "react";
const  UI=(props)=>{
    return (
        <div>

            <ul>
                {
                    props.products.map((item)=>{
                            return (
                                    <li key={item.id} style={{fontSize:"25px"}}>
                                        <span>名称：{item.name}</span><br/>
                                        <span>单价：￥{item.price}</span><br/>
                                        <button  onClick={ props.add.bind(this,item)} > + </button>
                                        <button  onClick = {props.jian.bind(this, item)} style={{marginLeft:"80px"}} > - </button>
                                    </li>
                            )
                    })
                }
               
             
            </ul>
            <h3>以下购物车</h3>
            <ol>
                  {
                    props.carts.map((item)=>{
                            return (
                                    <li key={item.id} >
                                        <span>名称：{item.name}</span> <br/>
                                        <span>数量：{item.num}</span><br/>  
                                        <span>价格：{item.price}</span><br/>
                                        <span>总价：{item.total}</span><br/>   
                                    </li>
                            )
                    })
                }
            </ol>
        </div>
    )
}

export  default  UI